<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div{
                width: 200px;
                height: 100px;
                border: 1px solid red;
                /*块级元素 允许设置宽高 竖着排*/
                display: block;
            }
            span{
                width: 200px;
                height: 200px;
                background-color: #ff0;
                /*行内元素 不允许设置宽高 横着排*/
                display: inline;
                display: block;/*可以修改元素的显示模式*/
            }
            /*输入框与按钮是行内块元素 既可以设置宽高，又横着排*/
            input,button{
                width: 200px;
                height: 200px;
                display: inline-block;
            }

            .d2{
                /*让元素消失 不占据页面的布局空间*/
                display: none;
            }
        </style>
        <meta charset="UTF-8">
        <title>元素显示模式</title>
    </head>
    <body>
        <div class="d1">d1</div>
        <div class="d2">d2</div>
        <div class="d3">d3</div>
        <hr>
        <span>123456789</span>
        <span>123456789</span>
        <span>123456789</span>
        <hr>
        <input type="text">
        <input type="text">
        <input type="text">
        <button>按钮</button>

    </body>
</html>